<template>
  <div class="contents">
    <div class="pagetab">
      <!--<div class="item" @click="gopage(0)">数据处理</div>
      <div class="item" @click="gopage(1)">模型分析</div>
      <div class="item"  @click="gopage(2)">业务应用</div>-->

      <el-menu

              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="rgba(0, 0, 0, 1)"
              text-color="#00FBF8"
              active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">数据处理</template>
          <el-submenu index="1-1">
            <template slot="title">数据加载</template>
            <el-menu-item index="1-1-1">加载shape数据</el-menu-item>
            <el-menu-item index="1-1-2">选项DXF数据</el-menu-item>
            <el-menu-item index="1-1-3">加载Gjson数据</el-menu-item>
          </el-submenu>
          <el-submenu index="1-2">
            <template slot="title">数据修改</template>
            <el-menu-item index="1-2-1">修改配图</el-menu-item>
            <el-menu-item index="1-2-2">修改属性</el-menu-item>
            <el-menu-item index="1-2-3">删除要素</el-menu-item>
          </el-submenu>

        </el-submenu>
        <el-submenu index="2">
          <template slot="title">模型分析</template>
          <el-menu-item index="2-1">范围线分析</el-menu-item>
          <el-menu-item index="2-2">规划条件出图</el-menu-item>

        </el-submenu>
        <el-menu-item index="3" >业务应用</el-menu-item>
      </el-menu>

      <div style="width: 1100px;"></div>
      <router-link to='/index'>
        <div class="item2">待开发</div>
      </router-link>
    </div>
    <div class="contetn_left">
      <dv-border-box-13>
        <div class="layer-content">
          <my-map_left :changepage="chagepage"/>
        </div>
      </dv-border-box-13>
    </div>
    <div class="contetn_center">
      <dv-border-box-13>
        <div class="map">
          <my-map_center :changepage="chagepage"/>
        </div>
      </dv-border-box-13>

    </div>
    <div class="contetn_right">
      <dv-border-box-13>
        <div class="method-content">
          <my-map_right :changepage="chagepage"/>
        </div>
      </dv-border-box-13>
    </div>
    <div class="app-container">
      <el-dialog :visible.sync="dataprocessDialogVisibleShp"  v-if="dataprocessDialogVisibleShp"  width="800px" append-to-body>
        <data_process_shp></data_process_shp>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="app-container">
      <el-dialog :visible.sync="dataprocessDialogVisibleDxf"  v-if="dataprocessDialogVisibleDxf"  width="800px" append-to-body>
        <data_process_dxf></data_process_dxf>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="app-container">
      <el-dialog :visible.sync="dataprocessDialogVisibleGeojson"  v-if="dataprocessDialogVisibleGeojson"  width="800px" append-to-body>
        <data_process_geojson></data_process_geojson>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- <div class="map_content">
       <dv-border-box-13>
         <div class="map">
           <my-map :changepage="chagepage"/>
         </div>
       </dv-border-box-13>
     </div>-->

  </div>
</template>

<script>
  import MyMap from './myMap'
  import MyMap_left from './myMap_left'
  import MyMap_center from './myMap_center'
  import MyMap_right from './myMap_right'
  import data_process_shp from './components/data-process-shp'
  import data_process_dxf from './components/data-process-dxf'
  import data_process_geojson from './components/data-process-geojson'

  export default {
    components: {
      MyMap,
      MyMap_left,
      MyMap_center,
      MyMap_right,
      data_process_shp,
      data_process_dxf,
      data_process_geojson,

    },
    data() {
      return {
        chagepage:{'sta':true,'btnum':99},
        clicknum:2,
        dataprocessDialogVisibleShp: false,
        dataprocessDialogVisibleDxf: false,
        dataprocessDialogVisibleGeojson: false,

      };
    },
    filters: {
      numsFilter(msg) {
        return msg || 0;
      },
    },
    created() {
    },

    mounted() {},
    methods: {
      gopage(e){
        var arr={}
        if(e===this.chagepage.btnum){
          arr.sta=true
          arr.btnum=e
          this.chagepage=arr

        }else{

          arr.sta=false
          arr.btnum=e
          this.chagepage=arr
        }


      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        //数据处理——数据加载——加载shape数据
        if(key==="1-1-1"){
          this.dataprocessDialogVisibleDxf = false;
          this.dataprocessDialogVisibleGeojson = false;
          this.dataprocessDialogVisibleShp = true;
        }
        if(key==="1-1-2"){
          this.dataprocessDialogVisibleShp = false;
          this.dataprocessDialogVisibleGeojson = false;
          this.dataprocessDialogVisibleDxf = true;
        }
        if(key==="1-1-3"){
          this.dataprocessDialogVisibleShp = false;
          this.dataprocessDialogVisibleDxf = false;
          this.dataprocessDialogVisibleGeojson = true;
        }
        /*if(key==="1-2-1"){
          this.dataprocessDialogVisible = false;
          this.dataprocessDialogVisible2 = false;
          this.gopage(1);
        }*/



      },
      cancel() {
        this.dataprocessDialogVisible = false;
        this.dataprocessDialogVisible2 = false;
      },
    },
  };
</script>
<style lang="scss" scoped>

  // 内容
  .contents {
    .contetn_left{
      width: 15%;
      .border-box-content{
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
      }
      .layer-content{
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
      }
    }

    .contetn_right {
      width: 20%;
      .border-box-content{
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
      }
      .method-content{
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
      }
    }

    .contetn_center {
      width: 65%;
      .border-box-content{
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
      }
      .map{
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
      }
    }
    ::v-deep .el-menu-item {
      font-size: 16px;
      height: 36px;
      line-height: 36px;
    }
    ::v-deep .el-submenu__title{
      font-size: 16px;
      height: 36px;
      line-height: 36px;
    }
    /*  //左右两侧 三个块
      .contetn_lr-item {
        height: 310px;
      }

      .contetn_center_top {
        width: 100%;
      }

      // 中间
      .contetn_center {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }

      .contetn_center-bottom {
        height: 315px;
      }

      //左边 右边 结构一样
      .contetn_left,
      .contetn_right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;


      }*/
  }


  @keyframes rotating {
    0% {
      -webkit-transform: rotate(0) scale(1);
      transform: rotate(0) scale(1);
    }
    50% {
      -webkit-transform: rotate(180deg) scale(1.1);
      transform: rotate(180deg) scale(1.1);
    }
    100% {
      -webkit-transform: rotate(360deg) scale(1);
      transform: rotate(360deg) scale(1);
    }
  }
</style>
